import $ from 'jQuery';
(function () {
    let ec = window.echarts;
    var $chart = null;
    var data = null;
    var option = null;
    // 初始化地图
    let $vue = new Vue({
        el: '.homepage-hook',
        data: {
            boxs: {
                box1: {show: true, hook: '.box1-hook', lock: true, url: '', params: {}},
                box2: {show: false, hook: '.box2-hook', url: '', params: {}},
                box3: {show: false, hook: '.box3-hook', url: '', params: {}},
                box4: {show: false, hook: '.box4-hook', url: '', params: {}}
            }
        },
        methods: {
            emitPage: function () {
                M.Page.load(this.boxs);
            },
            // 上一页
            prePage: function () {
                M.Page.prePage(this.boxs);
            },
            // 触发刷新页(当前显示的页面)
            refreshPage: function () {
                M.Page.refreshPage(this.boxs);
            },
            initMap: function () {
                if (!!$chart) {
                    $chart.dispose();
                }
                $chart = ec.init(document.getElementById('map'));
                $chart.setOption(option);
            }
        },
        mounted: function () {
            this.$nextTick(() => {
                data = [
                    {"name": "北京", "value": 21300},
                    {"name": "天津", "value": 5816},
                    {"name": "上海", "value": 28408},
                    {"name": "重庆", "value": 7890},
                    {"name": "河北", "value": 7120},
                    {"name": "河南", "value": 12406},
                    {"name": "云南", "value": 6870},
                    {"name": "辽宁", "value": 9845},
                    {"name": "黑龙江", "value": 5222},
                    {"name": "湖南", "value": 12658},
                    {"name": "安徽", "value": 10783},
                    {"name": "山东", "value": 16253},
                    {"name": "新疆", "value": 3536},
                    {"name": "江苏", "value": 31939},
                    {"name": "浙江", "value": 33156},
                    {"name": "江西", "value": 8684},
                    {"name": "湖北", "value": 14803},
                    {"name": "广西", "value": 7531},
                    {"name": "甘肃", "value": 2880},
                    {"name": "山西", "value": 5444},
                    {"name": "内蒙古", "value": 37750},
                    {"name": "陕西", "value": 7435},
                    {"name": "吉林", "value": 40190},
                    {"name": "福建", "value": 14269},
                    {"name": "贵州", "value": 5106},
                    {"name": "广东", "value": 11800},
                    {"name": "青海", "value": 60001},
                    {"name": "西藏", "value": 36500},
                    {"name": "四川", "value": 48894},
                    {"name": "宁夏", "value": 10270},
                    {"name": "海南", "value": 2149},
                    {"name": "台湾", "value": 58888},
                    {"name": "香港", "value": 36666},
                    {"name": "澳门", "value": 783}
                ];
                let max = 0;
                for (let i in data) {
                    max = max > data[i].value ? max : data[i].value;
                }
                option = {
                    title:{
                        text:"本站用户来源省份",
                        left:"center",
                        textStyle:{fontWeight:"normal"}
                    },
                    tooltip:{
                        trigger:"item"
                    },
                    dataRange: {
                        min: 0,
                        max: 70000,
                        left:"left",
                        top:"middle",
                        text:["高","低"],
                        calculable: true
                    },
                    series: [{
                        name:"本站用户来源的省份",
                        type:"map",
                        width:'80%',
                        height:'100%',
                        mapType:"china",
                        roam: false,
                        selectedMode: 'single', // 当前选中的省份-高亮
                        itemStyle: {
                            normal: {label: {show: true}},
                            emphasis: {label: {show: true}}
                        },
                        data: data
                    }]
                };
                this.initMap();
            });
        }
    });
})();